09-04-2021

避免與component混淆的最小單位

在建立element時，與DOM element 不同的是，React element是一個object（物件）
而當React DOM在更新時，就是在更新DOM來符合我們所寫的React element。

const element = <p>這是一個element!</p>

Render Element到DOM內

首先必須先確認好，我們目前是否已經將需要使用到React 顯示的位置在HTML中定義好了

<div id="root"></div>

root 是一個DOM node，因為所有的在root之內的element都會透過==React DOM==做管理。

• 依照不同的需求可以建立多個root DOM node，分別管理。

const element = <p>這是第一個顯示的文字</p>
ReactDOM.render(element, document.getElementById('root'));

解釋：

建立的一個新的變數我們稱為element，我們需要顯示的內容文字為這是第一個顯示的文字
再來我們需要讓他在ReactDOM管理的位置render(顯示)內容，我要顯示的內容是element,位置在document.getElementById('root')這裡

更新被Render的 Element

當我們建立好一個element後他是==不可變的變數==，也就是不能改變他的attribute（屬性）、與children(內容），element 所代表的是一個UI(固定的存在)。

• 所以若要在Render時更新，只能另外在建立一個新的element，並傳入 ReacDOM.render()

React 只會更新必要的Element。
即便我們每秒建立一個element內容，但只有內容有更改的text node才會被React DOM更新。